<template>
  <div>
    <div v-show="isShowTable">
      <el-card style="margin: 20px 0px">
        <CategorySelect @getCategoryId="getCategoryId"></CategorySelect>
      </el-card>
    </div>
    <el-card>
      <div v-show="isShowTable">
        <div>
          <!-- 添加按钮1:用于总题库的修改，后期靠一个全局参数权限role解决问题 -->
          <el-button type="primary" icon="el-icon-plus" @click="showDialog">添加试题</el-button>
          <!-- 多选，有关多个试题的统一操作：添加进自己的题库，多个删除 -->
          <el-button type="danger" icon="el-icon-delete" @click="batchesDelete">批量删除</el-button>
          <!-- 试卷导入试题使用按钮 -->
        </div>
        <!-- 表格展示平台属性 -->
        <!-- 
          表格组件 
          data:表格组件将来需要展示的数据------数组类型
          border：是给表格添加边框
          column属性
          label：显示标题
          width：对应列的宽度
          align：标题的对齐方式
          prop:对应列内容的字段名
          注意1：elmentUI当中的table组件，展示的数据是以一列一列进行展示数据
      -->
        <el-table style="width: 100%" border :data="list" v-loading="loading" 
          :row-class-name="tableRowClassName"
          ref="questionTable"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          :row-key="getRowKeys"
          :expand-row-keys="expands"
          @expand-change="expandSelect"
        >
          <!-- 勾选框，供多选使用 -->
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <!-- 展开页效果，用来展示题目详细的信息 -->
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="题目内容">
                  <span v-html="props.row.name"></span>
                </el-form-item>
                <!-- <el-form-item label="题目内容">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="题目图片">
                  <template slot-scope="{ row, $index }">
                    <img v-if="props.row.photo" :src="props.row.photo" alt="" style="width: 100px; height: 100px"/>
                  </template>
                </el-form-item> -->
                <el-form-item label="答案">
                  <span v-html="props.row.answer.replace('duang','')"></span>
                </el-form-item>
                <el-form-item label="题目类型">
                  <span>{{ props.row.type }}</span>
                </el-form-item>
                <el-form-item label="所属专业">
                  <span>{{ props.row.major }}</span>
                </el-form-item>
                <el-form-item label="所属科目">
                  <span>{{ props.row.subject }}</span>
                </el-form-item>
                <el-form-item label="难度">
                  <span>{{ props.row.level }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.gmtCreate }}</span>
                </el-form-item>
                <el-form-item label="修改时间">
                  <span>{{ props.row.gmtModified }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="题目类型" width="85" >
          </el-table-column>
          <el-table-column prop="prop" label="题目内容" width="width" show-overflow-tooltip>
            <template slot-scope="{row,$index}">
              <div>{{filterRichText(row.name)?filterRichText(row.name):'该题无解释信息'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="gmtCreate" label="创建时间" width="100">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="180">
            <template slot-scope="{row,$index}">
              <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateQuestion(row)">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteQuestion(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 
        分页器 
        当前第几页、数据总条数、每一页展示条数、连续页码数
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"

        current-page:代表的是当前第几页
        total：代表分页器一共需要展示数据条数
        page-size：代表的是每一页需要展示多少条数据
        page-sizes：代表可以设置每一页展示多少条数据
        layout：可以实现分页器布局
        pager-count:按钮的数量  如果 9  连续页码是7

      -->
        <el-pagination
          style="margin-top: 20px; text-align: center"
          :current-page="page"
          :total="total"
          :page-size="limit"
          :page-count="7"
          :page-sizes="[3, 5, 10]"
          @current-change="getQuestionList"
          @size-change="handleSizeChange"
          layout="prev, pager, next, jumper, ->, sizes, total"
        >
        </el-pagination>
      </div>
      <!-- 添加、修改的表单 -->
      <div v-show="!isShowTable">
        <el-form :inline="true" :model="cForm" ref="cForm" label-width="80px">
          <el-form-item label="题目类型" label-width="100px">
            <el-select placeholder="请选择" v-model="cForm.type" clearable>
              <el-option :label="c1.type" :value="c1.id" v-for="(c1, index) in typeList" :key="c1.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度等级" label-width="100px">
            <el-select placeholder="请选择" v-model="cForm.level" clearable>
              <el-option :label="c1" :value="c1" v-for="(c1, index) in levelList" :key="c1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业" label-width="100px">
            <el-select placeholder="请选择" v-model="cForm.major" clearable>
              <el-option :label="c1.major" :value="c1.id" v-for="(c1, index) in majorList" :key="c1.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="科目" label-width="100px">
            <el-select placeholder="请选择" v-model="cForm.subject" clearable>
              <el-option :label="c1.subject" :value="c1.id" v-for="(c1, index) in subjectList" :key="c1.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="归属题库" label-width="100px">
            <el-select placeholder="默认是总题库" v-model="cForm.storeId" clearable>
              <el-option :label="c1.name" :value="c1.id" v-for="(c1, index) in questionKuList" :key="c1.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目内容" label-width="100px">
            <div id="questionContent">
              <vue-tinymce v-model="cForm.name" :setting="setting" />
            </div>
          </el-form-item>
          <!-- <el-form-item label="题目内容" label-width="100px">
            <el-input type="textarea" placeholder="请输入内容" v-model="cForm.name"> </el-input>
          </el-form-item>
          <el-form-item label="题目图片" label-width="100px" prop="photo"> -->
            <!--这里收集数据：不能使用v-model，因为不是表单元素
              action:设置图片上传的地址
              :on-success:可以检测到图片上传成功，当图片上传成功，会执行一次
              :before-upload：可以在上传图片之前，会执行一次
            -->
            <!-- <el-upload
              class="avatar-uploader"
              action="/dev-api/examoss/fileoss/uploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="cForm.photo" :src="cForm.photo" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item> -->
          <el-form-item label="题目答案" label-width="100px">
            <div v-show="cForm.type==='1'||cForm.type==='2'">
              选择题答案只能输入大写字母
              <el-input v-if="cForm.type==='1'" placeholder="请输入内容" v-model="cForm.answer" onkeypress="return(/[A-Z]/.test(String.fromCharCode(event.keyCode)))"></el-input>
              <el-input v-else-if="cForm.type==='2'" placeholder="请输入内容" v-model="cForm.answer" onkeypress="return(/[A-Z]/.test(String.fromCharCode(event.keyCode)))"></el-input>
            </div>
            <div v-show="cForm.type==='3'"> 
              <el-radio v-model="cForm.answer" label="对">对</el-radio>
              <el-radio v-model="cForm.answer" label="错">错</el-radio>
            </div>
            <div v-show="!(cForm.type==='1'||cForm.type==='2'||cForm.type==='3')" class="filter-container">
              <el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="addAnswer">
                添加
              </el-button>
              <el-table :data="this.answerList" :border="true" style="width: 100%;">
                <el-table-column label="答案内容" width="800px">
                  <template slot-scope="scope">
                    <vue-tinymce v-model="scope.row.content" :setting="setting2" />
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="100px">
                  <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" circle @click="removeAnswerItem(scope.$index)" />
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- <div id="questionContent" v-show="!(cForm.type==='1'||cForm.type==='2'||cForm.type==='3')">
              <vue-tinymce v-model="cForm.answer" :setting="setting2" />
            </div> -->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
          <el-button @click="isShowTable = true">取 消</el-button>
          <el-button type="primary" @click="addOrUpdateQuestion">确 定</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "question_management",
  data() {
    return {
      //折叠页使用
      // 获取row的key值
      expands: [],
      getRowKeys(row) {
        return row.id
      },
      //选择题模板
      selectContent:'<p>选择题的选项列在题目描述内，选项个数没有限制，涉及填写答案相关的地方插入___________</p>\n<p>A.&nbsp;</p>\n<p>B.&nbsp;</p>\n<p>C.&nbsp;</p>\n<p>D.&nbsp;</p>',
      // 编辑器配置问题
      setting: {
        //翻译语言
        language:'zh_CN',
        //字体
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;Times New Roman;Verdana, Arial, Helvetica, sans-serif;仿宋=fangsong',
        //字号
        fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
        //设置输入框的参数
        //指定编辑器body初始化时底边距
        autoresize_bottom_margin: 50,
        //限定编辑器的最大高度
        max_height: 350,
        //限定编辑器的最小高度。
        min_height: 200,
        //指定编辑器body初始化时两侧的距离
        autoresize_overflow_padding: 25,
        //上传图片的接口
        images_upload_url: '/dev-api/examoss/fileoss/upFile',
        //想要修改图片，得实现的参数

        //限制图片大小
        content_style: "img {max-width:100%;}",
        //快速插入工具
        quickbars_insert_toolbar: 'quickimage',
        //隐藏底边栏
        //statusbar: false,
        //对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据
        images_upload_credentials: true,
        //撤销次数
        custom_undo_redo_levels: 10,
        //自动存稿的时间间隔
        autosave_interval: "20s",
        //恢复系统崩溃前的草稿
        autosave_restore_when_empty: true,
        //设置自动存稿，草稿保存的期限
        autosave_retention: "20m",
        // 菜单栏 
        menubar: 'bar1 bar2 bar3 bar4 bar5',
        menu: {
          bar1: {title:'文件',items:'newdocument'},
          bar2: {title:'编辑',items:'undo redo | cut copy paste | selectall'},
          bar3: {title:'查看',items:'visualaid code'},
          bar4: {title:'插入',items:'hr charmap codesample emoticons | image'},
          bar5: {title:'格式',items:'bold italic underline strikethrough superscript subscript | removeformat'},
        },
        // 工具栏
        toolbar: [
          'undo redo restoredraft | styleselect fontselect fontsizeselect | bold italic bullist numlist | preview fullscreen | charmap codesample emoticons image',
          'forecolor backcolor | searchreplace table wordcount'
        ],
        // 插件 preview预览
        plugins: 'wordcount table image preview lists advlist autoresize code charmap codesample emoticons fullscreen hr table link searchreplace',
        height: 350
      },
      //内联编辑器配置
      setting2:{
        //内联模式
        inline:true,
        //占位符
        placeholder: 'inputAnswer',
        //翻译语言
        language:'zh_CN',
        //字体
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;Times New Roman;Verdana, Arial, Helvetica, sans-serif;仿宋=fangsong',
        //字号
        fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
        //设置输入框的参数
        //指定编辑器body初始化时底边距
        autoresize_bottom_margin: 50,
        //限定编辑器的最大高度
        max_height: 350,
        //限定编辑器的最小高度。
        min_height: 200,
        //指定编辑器body初始化时两侧的距离
        autoresize_overflow_padding: 25,
        //上传图片的接口
        images_upload_url: '/dev-api/examoss/fileoss/upFile',
        //想要修改图片，得实现的参数

        //限制图片大小
        content_style: "img {max-width:100%;}",
        //快速插入工具
        quickbars_insert_toolbar: 'quickimage',
        //隐藏底边栏
        //statusbar: false,
        //对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据
        images_upload_credentials: true,
        //撤销次数
        custom_undo_redo_levels: 10,
        //自动存稿的时间间隔
        autosave_interval: "20s",
        //恢复系统崩溃前的草稿
        autosave_restore_when_empty: true,
        //设置自动存稿，草稿保存的期限
        autosave_retention: "20m",
        // 菜单栏 
        menubar: 'bar1 bar2 bar3 bar4 bar5',
        menu: {
          bar1: {title:'文件',items:'newdocument'},
          bar2: {title:'编辑',items:'undo redo | cut copy paste | selectall'},
          bar3: {title:'查看',items:'visualaid code'},
          bar4: {title:'插入',items:'hr charmap codesample emoticons | image'},
          bar5: {title:'格式',items:'bold italic underline strikethrough superscript subscript | removeformat'},
        },
        // 工具栏
        toolbar: [
          'undo redo restoredraft | styleselect fontselect fontsizeselect | bold italic bullist numlist | preview fullscreen | charmap codesample emoticons image',
          'forecolor backcolor | searchreplace table wordcount'
        ],
        // 插件 preview预览
        plugins: 'wordcount table image preview lists advlist autoresize code charmap codesample emoticons fullscreen hr table link searchreplace',
        height: 350
      },
      //试题有关属性
      typeId:'',
      majorId:'',
      subjectId:'',
      levelId:'',
      questionKuId:[],
      //代表的分页器第几页
      page:1,
      //当前页数展示数据条数
      limit:5,
      //总共数据条数
      total:0,
      //列表展示数据
      list:[],
      //加载中效果
      loading:false,
      //一堆下拉框数据列表
      majorList:[],
      subjectList:[],
      typeList:[],
      questionKuList:[],
      levelList:[1,2,3,4,5],
      //表单信息收集
      cForm:{
        major:'',
        subject:'',
        type:'',
        storeId:'',
        level:'',
        id:'',
        name:'',
        answer:'',
        //photo:'',
      },
      //自己处理的答案列表
      answerList:[],
      //已有照片的临时存储，用于删除操作
      imageUrl:'',
      //这个属性控制table表格显示与隐藏
      isShowTable:true,
      //存储多选的试题ids
      questionIds:[],
      //批量选择的题库id
      batchesStoreId:'',
    };
  },
  //组件挂载完毕发请求
  mounted() {
    //使用获取下拉框的数据的方法
    this.getMajorList();
    this.getSubjectList();
    this.getTypeList();
    this.getQuestionKuList();
    this.getQuestionList();
  },
  methods: {
    // 折叠面板每次只能展开一行
    expandSelect(row, expandedRows) {
      // console.log('expandedRows', expandedRows)
      // console.log('row', row)
      var that = this
      if (expandedRows.length) {
        that.expands = []
        if (row) {
          that.expands.push(row.id)// 每次push进去的是每行的ID
        }
      } else {
        that.expands = []// 默认不展开
      }
      // console.log('that.expands', that.expands)
    },
    //自定义事件的回调
    getCategoryId(cForm){
      //解构出所有的id，存在父组件
      const {categoryMajorId,categorySubjectId,categoryTypeId,categoryQuestionKuId,categoryLevelId,categoryContent} = cForm;
      this.majorId=categoryMajorId;
      this.subjectId=categorySubjectId;
      this.typeId=categoryTypeId;
      this.questionKuId=categoryQuestionKuId;
      this.levelId=categoryLevelId;
      this.content=categoryContent;
      //获取试题属性
      this.getQuestionList();
    },
    //获取试题列表的数据
    async getQuestionList(pager = 1){
      //原因是后端是从0开始的
      this.page = pager;
      //获取分类id
      const {content,typeId,majorId,subjectId,levelId,questionKuId,page,limit} = this;
      this.loading = true;
      //那就调用接口函数
        let result = await this.$API.questions.reqQuestionList(page-1,limit,content,typeId,majorId,subjectId,levelId);
        if(result.code==20000){
            //分别是展示数据的总条数与列表展示数组
            this.total = result.data.total;
            this.list = result.data.rows;
        }
      this.loading = false;
    },
    //当分页器某一页需要展示数据条数变化时触发
    handleSizeChange(limit){
      this.limit = limit;
      this.getQuestionList();
    },
    //获取下拉框的数据的方法
    async getMajorList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.questions.reqGetMajorList();
      if(result.code==20000){
          this.majorList = result.data.majorList;
      }
    },
    async getSubjectList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.questions.reqGetSubjectList();
      if(result.code==20000){
          this.subjectList = result.data.subjectList;
      }
    },
    async getTypeList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.questions.reqGetTypeList();
      if(result.code==20000){
          this.typeList = result.data.typeList;
      }
    },
    async getQuestionKuList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.questions.reqGetQuestionKuList();
      if(result.code==20000){
          this.questionKuList = result.data.personalQuestionStores;
      }
    },
    //点击添加试题的按钮
    showDialog(){
      //显示添加的表单
      this.isShowTable = false;
      //清除数据
      this.cForm = {
        major:'',
        subject:'',
        type:'',
        storeId:'',
        level:'',
        id:'',
        name:'',
        answer:'',
        photo:'',
      };
      this.answerList = [];
      // this.cForm.answerList.push({content:''});
    },
    //修改某一试题
    async updateQuestion(row){
      //row当前选中的行的信息
      //显示修改的表单
      this.isShowTable = false;
      //将已有的试题信息赋值给cForm进行展示
      //将服务器返回试题的信息，直接赋值给了cForm进行展示。
      //也就是cForm存储即为服务器返回试题信息
      //这里使用浅拷贝，不影响原数据
      //this.cForm = {...row};
      //有个小问题，下拉框要的是id不是中文
      var form = {...row};
      this.cForm = form;
      //分离答案，变成数组
      this.answerList = [];
      var answerArray = await this.cForm.answer.split("duang");
      for(var i=0;i<answerArray.length;i++){
        this.answerList.push({content:answerArray[i]});
      }
      // this.content = form.name;
      //this.imageUrl = row.photo;
      //处理下拉列表问题
      if(row.type){
        for(var i=0;i<this.typeList.length;i++){
          if(this.cForm.type==this.typeList[i].type){
            this.cForm.type=this.typeList[i].id;
          }
        }
      }
      if(row.major){
        for(var i=0;i<this.majorList.length;i++){
          if(this.cForm.major==this.majorList[i].major){
            this.cForm.major=this.majorList[i].id;
          }
        }
      }
      if(row.subject){
        for(var i=0;i<this.subjectList.length;i++){
          if(this.cForm.subject==this.subjectList[i].subject){
            this.cForm.subject=this.subjectList[i].id;
          }
        }
      }
      if(row.storeId){
        for(var i=0;i<this.questionKuList.length;i++){
          if(this.cForm.storeId==this.questionKuList[i].name){
            this.cForm.storeId=this.questionKuList[i].id;
          }
        }
      }
    },
    //删除某一试题
    deleteQuestion(row){
      //弹框
      this.$confirm('你确定删除该试题吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async() => {
        //当用户点击确定按钮时会触发
        //向服务器发送请求
            let params = {
              ids:row.id,
            };
            let result = await this.$API.questions.reqDeleteByIdsLogicQuestion(this.$qs.stringify(params,{ indices: false }));
            //如果删除成功
            if(result.code==20000){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //再次获取题库列表
              this.getQuestionList(this.list.length>1?this.page:this.page-1);
            }
        }).catch(() => {
        //当用户点击取消按钮时会触发
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      });
    },
    //添加和更新试题
    async addOrUpdateQuestion(){
      this.dialogFormVisible = false;
      //如果是单选和多选，就不变
      //合并答案数组
      if(this.cForm.type!='1'&&this.cForm.type!='2'&&this.cForm.type!='3'){
        this.answerListShiftAnswerString();
      }
        let result = await this.$API.questions.reqAddOrUpdateQuestion(this.cForm);
        if(result.code==20000){
          //弹出信息:添加|修改成功
          this.$message({
            type: "success",
            message: this.cForm.id ? "修改试题成功" : "添加试题成功",
          });
          //添加或者修改成功，再次调用列表展示
          this.getQuestionList();
          this.isShowTable = true;
        }
    },
    // //图片上传成功
    // handleAvatarSuccess(res, file) {
    //   //res：上传成功之后返回前端数据
    //   //file:上传成功之后服务器返回前端数据
    //   //收集品牌图片数据，因为将来需要带给服务器
    //   this.cForm.photo = res;
    // },
    // //图片上传之前
    // beforeAvatarUpload(file) {
    //   //可以在这里删除已有的照片
    //   if(this.imageUrl){
    //     //删除照片
    //     let result = this.$API.file_funs.reqDeleteFileByUrl(this.imageUrl);
    //     if(result){
    //       this.imageUrl = "";
    //       this.cForm.photo = "";
    //     }
    //   }

    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },  

    tableRowClassName({row, rowIndex}) {
      // 实现表格的自定义斑马纹
      // if (rowIndex%2 === 0) {
      //   return 'warning-row';
      // } else if (rowIndex%2 === 1) {
      //   return 'success-row';
      // }
      if (rowIndex%2 === 1) {
        return 'success-row';
      }
      return '';
    },
    //统计选中的题目id
    collectSelected(){
      var rowData = this.$refs.questionTable.selection;
      if(rowData.length){
        //有选中题目才会有操作
        //清空数组
        this.questionIds.length = 0;
        for(var i=0;i<rowData.length;i++){
          //抽取id存在questionIds里面
          this.questionIds.push(rowData[i].id);
        }
      }
    },
    //显示批量添加的框
    showBatchesAddDialog(){
      //刷新questionIds
      this.collectSelected();
      //显示弹出框
      this.dialogFormVisible = true;
    },
    //批量删除试题
    batchesDelete(){
      //统计ids
      this.collectSelected();
      //真的删除处
      //弹框
      this.$confirm('你确定删除这些试题吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async() => {
        //当用户点击确定按钮时会触发
        //向服务器发送请求
        //如果是个性化题库的题目,调用个性化题库的删除试题函数
            let params = {
              ids:this.questionIds,
            };
            let result = await this.$API.questions.reqDeleteByIdsLogicQuestion(this.$qs.stringify(params,{ indices: false }));
            //如果删除成功
            if(result.code==20000){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //再次获取题库列表
              this.getQuestionList(this.list.length>this.questionIds.length?this.page:this.page-(this.questionIds%this.limit));
            }
        }).catch(() => {
        //当用户点击取消按钮时会触发
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      });
    },
    //答案数组转换成字符串
    answerListShiftAnswerString(){
      var str ="";
      if(this.answerList){
        str+=this.answerList[0].content;
        for(var i=1;i<this.answerList.length;i++){
          var strItem = this.answerList[i].content;
          if(strItem){
            str+="duang"+strItem;
          }
        }
      }
      this.cForm.answer = str;
    },
    //添加答案
    addAnswer(){
      this.answerList.push({ content: ''});
    },
    //删除一项答案
    removeAnswerItem(index){
      this.answerList.splice(index, 1);
    },
    //过滤html代码,呈现纯文本
    filterRichText(richText){
      //强行把尖括号过滤掉
      let content = richText.replace(/<[^><]*>/g, '');
      //把换行符过滤掉
      content = content.replace(/&nbsp/ig,'');
      //过滤 &middot
      content = content.replace(/&middot/ig,'');
      return content;
    }
  },
  watch:{
    //监听cForm的type变化
    'cForm.type':{
      deep:true,
      handler(newValue,oldValue){
        //处理特殊题型，给出模板
        //第一种情况，添加题目，无答案，要选择type
        if(!this.cForm.name){
          if(newValue=='1'||newValue=='2'){
            this.cForm.name = this.selectContent;
          }else{
            this.cForm.name = '';
          }
        }
      }
    },
  },
};
</script>

<style>
.el-tooltip__popper{
  max-width: 500px
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-table .success-row {
  background: #F2F6FC;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>